<template>
	<div class="main_content">
		<div class="top_seach">
			<div class="btns">
				<el-button type="primary" icon="el-icon-plus" @click="handleAdd"
					style="margin-right: 10px;">新增</el-button>
				<el-input v-model="input" placeholder="请输入内容" clearable style="margin-right: 10px;" />
				<el-button type="primary" icon="el-icon-search" @click="handleSearch"
					style="margin-right: 10px;">搜索</el-button>
			</div>
		</div>
		<div class="content_table">
			<el-table :data="farmHouseData" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand" style="display: flex;">
							<div class="ImgBox">
								<el-form-item>
									<!-- <img :src="'/api/file/'+props.row.housePicture" width="200" /> -->
									<!-- <img v-for="(image, index) in props.row.housePicture.split(',')" 
									:key="index" :src="'/api/file/' + image" width="200" /> -->
									<img v-if="props.row.housePicture"
										:src="'/api/file/' + props.row.housePicture.split(',')[0]" width="200" />
								</el-form-item>
							</div>
							<div class="InfoBox">
								<el-form-item label="店家名称">
									<span>{{ props.row.houseName }}</span>
								</el-form-item>
								<el-form-item label="详细地址">
									<span>{{props.row.districtAddress}}</span>
								</el-form-item>
								<el-form-item label="价格">
									<span>￥{{ props.row.housePrice }}</span>
								</el-form-item>
								<el-form-item label="营业时间">
									<span>{{ props.row.businessTime }}</span>
								</el-form-item>
								<el-form-item label="状态">
									<span>{{ props.row.businessStatus == 0 ? '未营业':'营业' }}</span>
								</el-form-item>
								<el-form-item label="创建时间">
									<span>{{ props.row.createTime }}</span>
								</el-form-item>
								<el-form-item label="更新时间">
									<span>{{ props.row.updateTime }}</span>
									<!-- <span>{{data.msg}}</span> -->
								</el-form-item>
							</div>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column label="店家名称" prop="houseName" width="280">
				</el-table-column>
				<el-table-column label="状态" width="150">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.businessStatus === 0" type="warning">未营业</el-tag>
						<el-tag v-if="scope.row.businessStatus === 1" type="success">营业</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="所属地区" prop="houseRregion" width="360">
				</el-table-column>
				<el-table-column prop="description" width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="showContent(scope.row.description)">显示内容</el-button>
					</template>
				</el-table-column>
				<el-table-column label="描述" prop="description" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="180">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<EditorFarmHouse ref="editFarmHouse"></EditorFarmHouse>
		<AddFarmHouse ref="addFarmHouse"></AddFarmHouse>
		<el-dialog title="内容" :visible.sync="dialogFormVisible">
			<div class="w-e-text">
				<div v-html="houseDescription"></div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import EditorFarmHouse from "../../components/backstage/EditorFarmHouse.vue"
	import AddFarmHouse from "../../components/backstage/AddFarmHouse.vue"
	import farmHouseApi from "@/api/farmHouse.js"
	export default {
		components: {
			EditorFarmHouse,
			AddFarmHouse
		},
		data() {
			return {
				total: 0,
				pageSize: 5,
				currentPage: 1,
				dialogFormVisible:false,
				input: "",
				farmHouseData: [],
				options: [],
				houseDescription:{}
			}
		},
		methods: {
			showContent(row) {
				this.houseDescription = row;
				this.dialogFormVisible = true;
			},
			handleEdit(index, row) { //编辑点击事件
				console.log(index, row);
				this.$refs.editFarmHouse.dialogFormVisible = true;
				this.$refs.editFarmHouse.form = JSON.parse(JSON.stringify(row));
				this.$refs.editFarmHouse.form.businessStatus = this.$refs.editFarmHouse.form.businessStatus == 0 ? "未营业" :
					"营业";
				this.$refs.editFarmHouse.value = row.houseRregion.split(",");
				this.$refs.editFarmHouse.options = this.options;
				this.$refs.editFarmHouse.fileList = row.housePicture.split(",").map((path, index) => ({
					uid: index,
					url: this.$store.state.imgShowRoad2 + '/file/'+path,
					name: `file-${index}`,
				}));
				this.$refs.editFarmHouse.createEditor();
			},
			handleAdd() {
				this.$refs.addFarmHouse.dialogFormVisible = true;
				this.$refs.addFarmHouse.options = this.options;
				this.$refs.addFarmHouse.createEditor();
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteFarmHouse(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			async deleteFarmHouse(row) {
				const res = await farmHouseApi.deleteFarmHouse("/znFarmhouse/delParamHouse/" + row.houseId);
				this.SearchHouseAll();
			},
			async handleSearch() { //搜索
				this.SearchHouseAll();
			},
			async SearchHouseAll() {
				const res = await farmHouseApi.SearchFarmHouse("/znFarmhouse/SearchHouseAll", {
					input: this.input,
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.farmHouseData = res.data.records;
					this.total = res.data.total;
				}
			},
			async GetTree() {
				const res = await farmHouseApi.GetTree("/sysRegion/RegionTree");
				if (res.code == 200) {
					this.options = res.data;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.SearchHouseAll();
			},
			getFirstImage(index) {
				// 将 housePicture 字符串拆分成数组，取指定索引的文件名
				const images = props.row.housePicture.split(',');
				if (index >= 0 && index < images.length) {
					return images[index];
				}
				// 如果索引越界，可以返回一个默认的文件名或者空字符串，视情况而定
				return '';
			},
		},
		created() {
			this.SearchHouseAll();
			this.GetTree();
		}
	}
</script>

<style lang="scss">
	.main_content {
		height: 100%;

		.top_seach {
			height: 7%;
			position: relative;

			.btns {
				display: flex;
				position: absolute;
				left: 38%;
				top: 30%;
			}
		}

		.content_table {
			height: 83%;

			.demo-table-expand {
				font-size: 0;

			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 50%;
			}

			.ImgBox {
				margin: 0 20px 0 20px;
			}

			.InfoBox {}
		}

		.footer_page {
			height: 10%;
			position: relative;

			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 50%;
				transform: translateY(-50%);

			}
		}

	}
</style>